<template>
  <div class="root">
    <div class="divBox">
      <div class="content-container">
        <div class="cardBody">
          <span class="header">创建项目</span>
          <el-divider></el-divider>
          <div class="form-container">
            <el-form :model="form" label-width="120px">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="项目名称" required>
                    <el-input v-model="form.projectName" placeholder="请输入项目名称"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="业主名称" required>
                    <el-input v-model="form.ownerName" placeholder="请输入业主名称"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="国家" required>
                    <el-select v-model="form.country" placeholder="请选择国家" style="width: 100%">
                      <el-option label="中国" value="CN"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="省份" required>
                    <el-select v-model="form.province" placeholder="请选择省份" style="width: 100%">
                      <el-option label="北京市" value="110000"></el-option>
                      <el-option label="上海市" value="310000"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="城市" required>
                    <el-select v-model="form.city" placeholder="请选择城市" style="width: 100%">
                      <el-option label="北京市" value="110100"></el-option>
                      <el-option label="上海市" value="310100"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="项目地点" required>
                    <el-input v-model="form.address" placeholder="请输入项目地点"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="开发机构" required>
                    <el-input v-model="form.assetsDevelopAgency" placeholder="请输入开发机构名称"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="减排量" required>
                    <el-input v-model="form.estimatedReduction" placeholder="请输入减排量"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="方法学">
                    <el-input v-model="form.carbonMethodology" placeholder="请选择方法学" disabled></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="项目介绍">
                <el-input type="textarea" v-model="form.projectIntroduction" :rows="4" placeholder="请输入项目介绍"></el-input>
              </el-form-item>
            </el-form>
            <div class="button-group">
              <el-button type="primary" @click="onSave">保存</el-button>
              <el-button @click="onNext">下一步</el-button>
              <el-button @click="onCancel">取消</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { createCarbonProject } from "@/api/carbonAssetApi";
export default {
  name: "projectAdd",
  data() {
    return {
      form: {
        projectName: "",
        ownerName: "",
        country: "",
        province: "",
        city: "",
        address: "",
        assetsDevelopAgency: "",
        estimatedReduction: "",
        carbonMethodology: "",
        projectIntroduction: "",
        projectStatus: "0100000001", // 已创建
        projectType: "0010000001"
      }
    };
  },
  methods: {
    onSave() {
      if (!this.validateForm()) {
        return;
      }
      createCarbonProject(this.form).then(
        (res) => {
          console.log('创建项目API响应:', res);
          this.$message.success("保存成功");
        },
        (err) => {
          console.error('创建项目失败:', err);
          this.$message.error("保存失败");
        }
      );
    },
    onNext() {
      if (!this.validateForm()) {
        return;
      }
      this.$router.push({
        path: "/carbonAssets/dev/projectDetail",
        query: { form: this.form },
      });
    },
    onCancel() {
      this.$router.go(-1);
    },
    validateForm() {
      if (!this.form.projectName) {
        this.$message.error("请输入项目名称");
        return false;
      }
      if (!this.form.ownerName) {
        this.$message.error("请输入业主名称");
        return false;
      }
      if (!this.form.country) {
        this.$message.error("请选择国家");
        return false;
      }
      if (!this.form.province) {
        this.$message.error("请选择省份");
        return false;
      }
      if (!this.form.city) {
        this.$message.error("请选择城市");
        return false;
      }
      if (!this.form.address) {
        this.$message.error("请输入项目地点");
        return false;
      }
      if (!this.form.assetsDevelopAgency) {
        this.$message.error("请输入开发机构名称");
        return false;
      }
      if (!this.form.estimatedReduction) {
        this.$message.error("请输入减排量");
        return false;
      }
      return true;
    }
  }
};
</script>

<style lang="scss" scoped>
.root {
  background: #f2f5f7;
}

.divBox {
  margin: 20px;
  background: #ffffff;
  box-shadow: 0px 2px 8px 0px #eaf0f3;
  border-radius: 8px;
}

.cardBody {
  margin: 30px;
}

.header {
  font-size: 18px;
  font-weight: 500;
  color: #24a776;
}

.form-container {
  margin-top: 20px;
}

.button-group {
  text-align: right;
  margin-top: 20px;
}

.button-group .el-button {
  margin-left: 10px;
}
</style>